﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/QuizAdmin.Master" AutoEventWireup="true" CodeBehind="EditQuestion.aspx.cs" Inherits="BladeTecWebApplication.Admin.EditQuestion" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
	$(function () {
		$('#tabs').tabs();
		$('#tabs1').tabs();

		$('#errorDialog').dialog({
			autoOpen: false,
			width: 400,
			modal: true,
			buttons: {
				"Ok": function () {
					$(this).dialog("close");
				}
			}
		});

	});

	$(document).ready(function () {
		$("#MainContent_rblQuestionType_0").click(function () { toggleFormEnabled(false); });
		$("#MainContent_rblQuestionType_1").click(function () { toggleFormEnabled(true); });

		if ($("#MainContent_rblQuestionType_1").is(":checked")) {
			toggleFormEnabled(true);
		} else {
			addAnswer();
		}

	});

	var delayDiv = null;

	function toggleFormEnabled(enabled) {
		try {
			if (!enabled) {
				delayDiv.appendTo($("#answerForm"));
			} else {
				delayDiv = $("#answerFormOverlay").detach();
			}
		} catch (e) { }

	}

	function addAnswer() {
		answerCount = $("input[itype='answer']").length

		if (answerCount >= 10) {
			$('#errorDialog').dialog('open');
			return false;
		}

		var char = String.fromCharCode(97 + answerCount);

		if (answerCount == 0) {
			var aRowHtml = '<tr><td valign="top" style="width:10px;">' + char + ':</td><td style="width: 10px;">&nbsp;</td><td><input type="text" name="answer_' + char + '" id="answer_' + char + '" class="stdTextBox" itype="answer" style="width:220px;" /></td><td style="padding-left: 10px;"><input type="radio" name="correct_answer" checked="true" value="' + char + '" /></td></tr><tr><td colspan="4" style="height:5px;">&nbsp;</td></tr>';
		} else {
			var aRowHtml = '<tr><td valign="top" style="width:10px;">' + char + ':</td><td style="width: 10px;">&nbsp;</td><td><input type="text" name="answer_' + char + '" id="answer_' + char + '" class="stdTextBox" itype="answer" style="width:220px;" /></td><td style="padding-left: 10px;"><input type="radio" name="correct_answer" value="' + char + '" /></td></tr><tr><td colspan="4" style="height:5px;">&nbsp;</td></tr>';
		}
		$("#MainContent_answerTable").append(aRowHtml);

	}

	function validate() {
		if (Page_ClientValidate()) {
			$("#divRequired").hide();
		} else {
			$("#divRequired").show();
		}
	}

</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<span class="pageTitle">Edit Question</span>
<br /><br />

<asp:Panel ID="pnlSuccessMessage" runat="server">
	
	The question was successfully updated.
	<br /><br />
	<a class="dashboardLink" href="ViewQuestions.aspx">View Questions</a>

</asp:Panel>

<asp:Panel cssclass="ui-widget" runat="server" Visible="false" ID="pnlErrorEmptyAnswer">
	<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
		<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span> 
		<strong>One or more answers were left blank. Please provide answer text for all multiple choice answers.</strong>
		</p>
	</div>
	<br />
</asp:Panel>

<asp:Panel runat="server" ID="pnlDefineQuestionForm">
	<div style="color: Red; display:none" id="divRequired">
	* Required<br /><br />
	</div>
	<div id="tabs" style="width: 600px;">
		<ul>
			<li><a href="#tabs-1">Question Information</a></li>
		</ul>
		<div id="tabs-1">
			<table cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td valign="top">Question Text:<asp:RequiredFieldValidator ID="rfQtext" runat="server"
							ErrorMessage="*" ControlToValidate="txtQuestionText" ForeColor="Red"></asp:RequiredFieldValidator></td>
					<td style="width: 10px;">&nbsp;</td>
					<td><asp:TextBox ID="txtQuestionText" runat="server" Width="400px" CssClass="stdTextBox" Rows="5" TextMode="MultiLine"></asp:TextBox></td>
				</tr>
				<tr>
					<td colspan="3" style="height:5px;">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top">Question Level:<asp:RequiredFieldValidator ID="rfLevel" runat="server"
							ErrorMessage="*" ControlToValidate="ddlLevel" ForeColor="Red"></asp:RequiredFieldValidator></td>
					<td style="width: 10px;">&nbsp;</td>
					<td>
						<asp:DropDownList ID="ddlLevel" runat="server">
						</asp:DropDownList>
					</td>
				</tr>
				<tr>
					<td colspan="3" style="height:5px;">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top">Question Category:<asp:RequiredFieldValidator ID="rfQC" runat="server"
							ErrorMessage="*" ControlToValidate="ddlCategory" ForeColor="Red"></asp:RequiredFieldValidator></td>
					<td style="width: 10px;">&nbsp;</td>
					<td>
						<asp:DropDownList ID="ddlCategory" runat="server">
						</asp:DropDownList>
					</td>
				</tr>
			</table>
		</div>
	</div>
	<br />
	<br />

	<div id="tabs1" style="width:600px;">
		<ul>
			<li><a href="#tabs-2">Answers</a></li>
		</ul>
		<div id="tabs-2">
			<asp:RadioButtonList ID="rblQuestionType" runat="server" ClientIDMode="Predictable">
				<asp:ListItem Text="Short Answer" Value="S"></asp:ListItem>
				<asp:ListItem Text="Multiple Choice" Value="M"></asp:ListItem>
			</asp:RadioButtonList>
			<br />
			<asp:Panel ID="pnlAnswerForm" runat="server">
			<div style="position: relative; overflow:hidden; padding:5px;" class="fakewindowcontain" id="answerForm">
				
				<div id="answerList">
					
					<table cellpadding="0" cellspacing="0" border="0" id="answerTable" runat="server">
						<tr>
							<th style="padding-bottom: 10px;">Answers</th>
							<th></th>
							<th></th>
							<th style="padding-left: 10px; padding-bottom:10px;">Correct?</th>
						</tr>
					</table>

				</div>
				<br />
				<button onclick="addAnswer();return false;">Add Answer</button>

				<!-- Leave this div alone - it's required for enabling/disabling the form -->
				<div class="ui-overlay" id="answerFormOverlay">
					<div class="ui-widget-overlay">
					</div>
				</div>
			</div>
			</asp:Panel>

		</div>
	</div>

	<div style="width:600px; text-align:right;">
		<br />
		<asp:Button ID="btnSaveQuestion" runat="server" Text="Save Question" OnClientClick="validate();"
			onclick="btnSaveQuestion_Click" />
	</div>

</asp:Panel>

<div id="errorDialog" title="Too Many Answers">
	No more than 10 answers are allowed per question.
</div>

</asp:Content>
